<!DOCTYPE html>
<html lang="en">
    <head>
		<meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
        <title>Motion - Responsive vCard Template</title>
        <meta name="viewport" content="width=device-width, maximum-scale=1.0, initial-scale=1.0, user-scalable=no" />
        <meta name="description" content="Motion - Responsive vCard Template" />
        <meta name="keywords" content="jmpress, slideshow, container, plugin, jquery, css3" />
        <meta name="author" content="lmtheme" />
        <link rel="shortcut icon" href="../favicon.html"> 
        <link rel="stylesheet" href="css/skeleton.css">
        <link rel="stylesheet" href="css/jquery.jscrollpane.css" type="text/css" media="all" /> 
        <link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="all" />
        <link rel="stylesheet" href="css/jquery.qtip.css" type="text/css" media="all" />
        <link rel="stylesheet" href="preview/jquery.slidePanel.css" type="text/css" media="all" />
        <link rel="stylesheet" href="css/style.css" type="text/css" media="all" />

		<!-- jQuery -->
		<script src="js/jquery-1.8.2.min.js" type="text/javascript"></script>
		<!-- jmpress plugin -->
		<script src="js/jms.js" type="text/javascript"></script>
		<!-- extends the jmpress plugin -->
		<script src="js/jmpress.js" type="text/javascript"></script>
        <!-- jQuery Easing 1.3 -->
		<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
        <!-- Detect Mobile Browser -->
		<script src="js/detectmobilebrowser.js" type="text/javascript"></script>
        <!-- jScrollpane -->
		<script src="js/mousewheel.js" type="text/javascript" ></script>     
        <!-- jScrollpane -->
		<script src="js/jquery.jscrollpane.min.js" type="text/javascript"></script> 
        <!-- Quicksand -->  
        <script src="js/jquery.quicksand.js" type="text/javascript"></script>
        <!-- prettyPhoto -->
        <script src="js/jquery.prettyPhoto.js" type="text/javascript"></script>
        <!-- qTip -->
        <script src="js/jquery.qtip.min.js" type="text/javascript"></script>
        <!-- jQuery mobile gmaps -->
        <script src="js/jquery.mobilegmap.min.js" type="text/javascript"></script>
        <script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script> 
        <!-- Contact Form -->
        <script src="js/contact_form.js" type="text/javascript"></script>
        <!-- Settings -->
        <script src="js/main.js" type="text/javascript"></script>
        <!-- Modernizr -->
		<script src="js/modernizr.custom.48780.js" type="text/javascript"></script> 
        
        <!-- Demo Preview -->
        <script src="preview/jquery.slidePanel.min.js" type="text/javascript"></script>
        <script type="text/javascript">
	    $(document).ready(function(){		
		   $('#style_switcher_panel').slidePanel({
			   triggerName: '#trigger',
			   triggerTopPos: '100px',
			   panelTopPos: '100px'
		   });
		
		   $('.precy').click(function (){
			   var bg = $(this).attr('title');
			   $('body').css("background-image",bg)
		   });		
	    });
	    </script>
        
        <!--[if lt IE 7]>
        <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE7.js"></script>
        <![endif]-->
        <!--[if lt IE 8]>
        <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script>
        <![endif]-->
        <!--[if lt IE 9]>
        <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
        <![endif]-->
        
		<noscript>
			<style>
			.step {				
				position: relative;
			}
			.step:not(.active) {
				opacity: 1;
				filter: alpha(opacity=99);
				-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=99)";
			}
			.step:not(.active) a.jms-link{
				opacity: 1;
				margin-top: 40px;
			}
			</style> 
		</noscript> 
    </head>
    <body>
    
    <!-- preview -->
	<a href="#" id="trigger" class="trigger left"></a>
	<div id="style_switcher_panel" class="panel left">
    
        <h4>Color Schemes</h4>
        <a href="index-2.html"><div class="preview" id="color1">&nbsp;</div></a>
    	<a href="../motion_vcard_template_blue/index-2.html"><div class="preview" id="color2">&nbsp;</div></a>
        <a href="../motion_vcard_template_violet/index-2.html"><div class="preview" id="color3">&nbsp;</div></a>
        <a href="../motion_vcard_template_turquoiseblue/index-2.html"><div class="preview" id="color4">&nbsp;</div></a>
        <a href="../motion_vcard_template_purple/index-2.html"><div class="preview" id="color5">&nbsp;</div></a>
        <a href="../motion_vcard_template_red/index-2.html"><div class="preview" id="color6">&nbsp;</div></a>
        <a href="../motion_vcard_template_orange/index-2.html"><div class="preview" id="color7">&nbsp;</div></a>
        <a href="../motion_vcard_template_gray/index-2.html"><div class="preview" id="color8">&nbsp;</div></a>
        <a href="../motion_vcard_template_yellow/index-2.html"><div class="preview" id="color9">&nbsp;</div></a>
        <a href="../motion_vcard_template_peach/index-2.html"><div class="preview" id="color10">&nbsp;</div></a>
        <div class="row"></div>
        
        <h4>Backgrounds</h4>
    	<a class="precy" href="#" title="url(images/body_backrounds/body_bg_1.png)"><div class="preview" id="bg1">&nbsp;</div></a>
        <a class="precy" href="#" title="url(images/body_backrounds/body_bg_2.png)"><div class="preview" id="bg2">&nbsp;</div></a>
        <a class="precy" href="#" title="url(images/body_backrounds/body_bg_3.png)"><div class="preview" id="bg3">&nbsp;</div></a>
  		<a class="precy" href="#" title="url(images/body_backrounds/body_bg_4.png)"><div class="preview" id="bg4">&nbsp;</div></a>
  		<a class="precy" href="#" title="url(images/body_backrounds/body_bg_5.png)"><div class="preview" id="bg5">&nbsp;</div></a>
  		<a class="precy" href="#" title="url(images/body_backrounds/body_bg_6.png)"><div class="preview" id="bg6">&nbsp;</div></a>
        <a class="precy" href="#" title="url(images/body_backrounds/body_bg_7.png)"><div class="preview" id="bg7">&nbsp;</div></a>
        <a class="precy" href="#" title="url(images/body_backrounds/body_bg_8.png)"><div class="preview" id="bg8">&nbsp;</div></a>  
           
    </div>    
    
        <div class="container">
			<header>
              <div class="sixteen columns">
                    <div class="My_name">
                        <!-- <img src="images/logo.png" alt="logo"> -->
                        <h1>John Doe</h1> 
                        <h3>Web Developer/Designer</h3>
                    </div>
              </div> 
              
			  <!-- Primary Navigation -->
			  <nav id="menu" class="sixteen columns" >
				  <ul id="nav">	<!-- <nav> -->			
					  <li class="active">
						  <a href="#home">Home</a>
					  </li>
					  <li>
						  <a href="#resume">Resume</a>
					  </li>
					  <li>
						  <a href="#services">Services</a>
					  </li>
					  <li>
						  <a href="#portfolio">Portfolio</a>
					  </li>
					  <li>
						  <a href="#contact">Contact</a>
					  </li>
				  </ul>
  
			      <!-- Dropdown Menu For Mobile Device -->
			      <select id="dd_menu">
					 <option value="#home">Home</option>
					 <option value="#resume">Resume</option>
					 <option value="#services">Services</option>
					 <option value="#portfolio">Portfolio</option>
					 <option value="#contact">Contact</option>						
			      </select>
			      <!-- Dropdown Menu End -->               
			  </nav><!-- #primary -->  
          	
			</header>
 
			<section id="jms-slideshow" class="jms-slideshow sixteen columns">
				<div id="home" class="step" data-x="2000" data-y="1000" data-z="3000" data-rotate="-20">
					<div id="jms-content">
                            <div class="five columns"> 
                             <div class="block">
                                 <div class="portrait">
                                     <img src="images/my_photo_1.jpg" alt=""/>
                                 </div>
                             </div>
                            </div>
                          
                            <div class="six columns">
                             <div class="block"> 
                              <div class="general_info">
                               <h3>I am Web Developer/Designer @ Company.com</h3>
                               <p>Donec aliquam feugiat tincidunt. In vitae nunc lacus. Proin nisi neque, facilisis semper rutrum a, fermentum ut sapien. Nulla ac velit non est sollicitudin facilisis. Nullam viverra vestibulum interdum. Suspendisse augue tellus, sollicitudin ut tristique ac, ornare in leo. Aliquam ipsum justo, rutrum eu ornare a, mattis ut leo.</p>             
                              </div>
                                
                              <div class="social_icons">
                              <h3>Follow Me on</h3>
                                 <ul class="social">
                                     <li><a class="tip" href="#" title="Twitter"><img src="images/social/twitter.png" alt="" /></a></li>
                                     <li><a class="tip" href="#" title="Dribbble"><img src="images/social/dribbble.png" alt="" /></a></li> 
                                     <li><a class="tip" href="#" title="last.fm"><img src="images/social/lastfm.png" alt="" /></a></li>
                                     <li><a class="tip" href="#" title="Google Plus"><img src="images/social/googleplus.png" alt="" /></a></li>
                                     <li><a class="tip" href="#" title="Youtube"><img src="images/social/youtube.png" alt="" /></a></li>
                                     <li><a class="tip" href="#" title="Skype"><img src="images/social/skype.png" alt="" /></a></li>
                                 </ul> 
                              </div>                                 
                               
                             </div>                           
                            </div>
                            
                            <div class="five columns">
                             <div class="block end">
                             <!-- personal info -->
                             <ul class="personal-info">
                             	<li><span class="title">Name</span><span class="value">John Doe</span></li>
                                <li><span class="title">Age</span><span class="value">27</span></li>
                                <li><span class="title">Address</span><span class="value">88 Street - State, Town</span></li>
                                <li><span class="title">e-mail</span><span class="value"><a href="mailto:email@addres.com">email@addres.com</a></span></li>
                                <li><span class="title">Phone</span><span class="value">+0123 123 456 789</span></li>
                                <li><span class="title">Freelance</span><span class="value available">Available</span></li> <!-- if Freelance not available: change class to not_available (then color text = Red) -->
                             </ul>                                                   
                             </div>
                            </div>
					</div>
				</div>
                
				<div id="resume" class="step" data-x="1000" data-z="2000" data-rotate="20">
					<div id="jms-content2">
                              <div class="one-third column">
                               <div class="block">
                                   <div class="title">
                                      <h2>Employment</h2>
                                   </div>   
                                    <div class="detailsCol">
                                       <ul class="employment_ul">
                                          <li>
                                              <h3>Web Designer<span class="date">2012 - Present</span></h3>
                                              <p>Vestibulum gravida metus vel sem gravida luctus. Phasellus sit amet cursus purus.</p>
                                          <span class="place">Google</span>
                                          </li>
                                          <li>
                                               <h3>Web Developer<span class="date">2006 - 2012</span></h3>
                                               <p>Aliquam pellentesque risus vel diam porttitor dapibus. In hac habitasse platea dictumst.</p>
                                               <span class="place">Google</span>
                                          </li>
                                          <li>
                                               <h3>Ui Designer<span class="date">2003 - 2006</span></h3>
                                               <p>Integer ante augue, fermentum nec pellentesque ut, congue at nisi.</p>
                                               <span class="place">Google</span>
                                         </li>
                                       </ul>
                                    </div>
                               </div>
                              </div>
     
                              <div class="one-third column">
                               <div class="block">
                                   <div class="title">
                                       <h2>Education</h2>
                                   </div>
                                    <div class="detailsCol">
                                       <ul class="education_ul">
                                          <li>
                                              <h3>Ui Designer<span class="date">2005 - 2012</span></h3>
                                              <p>Praesent vel diam lorem. Vivamus vitae justo ut ipsum faucibus molestie at sed tortor.</p>
                                              <span class="place">Google</span>
                                          </li>
                                          <li>
                                              <h3>Ui Designer<span class="date">2003 - 2005</span></h3>
                                              <p>Fusce porttitor magna ac ligula posuere at congue quam dictum.</p>
                                              <span class="place">Google</span>
                                         </li>
                                         <li>
                                              <h3>Ui Designer<span class="date">2001 - 2005</span></h3>
                                              <p>Aliquam tellus quam, varius quis laoreet iaculis, posuere sed odio.</p>
                                              <span class="place">Google</span>
                                         </li>
                                       </ul>
                                    </div>
                               </div>
                              </div>                         
                            
                              <div class="one-third column">
                               <div class="block end">
                                  <div class="title">
                                      <h2>My Skills</h2>
                                  </div>
                                    <div class="skillsInfo">
	                                  <em>Javascript</em>                               
	                                  <div class="skill-container">
		                                  <div class="skill-1"></div>
	                                  </div>
	
                                      <em>Php/Sql</em>
	                                  <div class="skill-container">
		                                  <div class="skill-2"></div>
	                                  </div>
	
                                      <em>Dreamweaver</em>
	                                  <div class="skill-container">
		                                  <div class="skill-3"></div>
	                                  </div>
	                                  <em>Web design</em>                               
	                                  <div class="skill-container">
		                                  <div class="skill-4"></div>
	                                  </div>
	
                                      <em>Graphic Design</em>
	                                  <div class="skill-container">
		                                  <div class="skill-5"></div>
	                                  </div>
 
                                      <em>Print Design</em>
	                                  <div class="skill-container">
		                                  <div class="skill-6"></div>
	                                  </div> 
                                    </div>
                               </div>
                              </div> 



					</div>
				</div>
                
				<div id="services" class="step" data-x="2000" data-y="1500" data-z="1000" data-rotate="20">
					<div id="jms-content3">
		                      <!-- Services -->
		                      <div class="sixteen columns">
                               <div class="block2">
			                    <div class="services clearfix">
                                
				                 <div class="four columns omega">
					                 <div class="service">
						                 <img src="images/services/serv1.png" alt="Community">
						                 <h4>Responsive Design</h4>
						                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
					                 </div>
				                 </div>
                
				                 <div class="four columns omega">
					                 <div class="service">
						                 <img src="images/services/serv2.png" alt="Branding">
						                 <h4>Branding</h4>
						                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
					                 </div>
				                 </div>
                
				                 <div class="four columns omega">
					                 <div class="service">
						                  <img src="images/services/serv3.png" alt="Development">
						                  <h4>Web Development</h4>
						                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
					                 </div>
				                 </div>
                
				                 <div class="four columns omega">
					                 <div class="service">
						                  <img src="images/services/serv4.png" alt="Support">
						                  <h4>24/7 Support</h4>
						                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
					                 </div>                 
				                 </div>
                                 
			                    </div>
		                       </div>             
                              </div>
					</div>
				</div>
                
				<div id="portfolio" class="step" data-x="3000" data-y="2000">
					<div id="jms-content4">

                              <div class="sixteen columns">
                               <div class="block2">

						           <!-- Filter nav -->
                                   <ul class="filter">
                                      <li class="current all"><a href="#">All</a></li>
                                      <li class="webdesign"><a href="#">Web Design</a></li>
                                      <li class="webdevelopment"><a href="#">Web Development</a></li>
                                   </ul>
                                   <!-- End filter nav -->


	                               <!-- Portfolio Items -->
	                               <ul class="portfolio group">

                                       <li class="item four columns omega" data-id="id-1" data-type="webdevelopment" >
                                        <a href="images/portfolio_images/big/image_1.jpg" data-rel="prettyPhoto[portfolio]">
                                          <div class="flip box fade">
                                           <div class="rollover">
                                            <div class="cube">
                                            
                                             <figure class="front">
                                                  <img src="images/portfolio_images/image_1.jpg" alt=""/>
                                             </figure><!--front-->
        
                                             <section class="back">
                                              <div class="back-wrap">
                                                  <h3>Sed sed orci risus</h3>
                                                  <p>Proin eu purus purus, eu viverra nisi. Vestibulum tincidunt consectetur diam, at iaculis ipsum aliquet in.</p>  
                                              </div><!--back-wrap-->
                                             </section><!--back-->
                                             
                                            </div><!--cube-->
                                           </div><!--rollover-->
                                          </div><!--flip-->
                                        </a>
                                       </li><!--box1 ends here-->

		                               <li class="item four columns omega" data-id="id-2" data-type="webdevelopment">
                                        <a href="images/portfolio_images/big/image_2.jpg" data-rel="prettyPhoto[portfolio]">
                                          <div class="flip box fade">
                                           <div class="rollover">
                                            <div class="cube">
                                            
                                             <figure class="front">
                                                  <img src="images/portfolio_images/image_2.jpg" alt=""/>
                                             </figure><!--front-->
        
                                             <section class="back">
                                              <div class="back-wrap">
                                                  <h3>Curabitur id nisl sapien</h3>
                                                  <p>Proin in sem odio, et faucibus felis. Vestibulum sed justo vitae massa varius pellentesque.</p>  
                                              </div><!--back-wrap-->
                                             </section><!--back-->
                                             
                                            </div><!--cube-->
                                           </div><!--rollover-->
                                          </div><!--flip-->
                                        </a>
		                               </li>

		                               <li class="item four columns omega" data-id="id-3" data-type="webdevelopment"> 
                                        <a href="images/portfolio_images/big/image_3.jpg" data-rel="prettyPhoto[portfolio]"> 
                                          <div class="flip box fade">
                                           <div class="rollover">
        
                                            <div class="cube">
                                             <figure class="front">
                                                  <img src="images/portfolio_images/image_3.jpg" alt=""/>
                                             </figure><!--front-->
        
                                             <section class="back">
                                              <div class="back-wrap">
                                                  <h3>Donec quis velit nisi</h3>
                                                  <p>Curabitur non dolor at ligula ultrices dictum. Sed sit amet aliquam ante.</p>  
                                              </div><!--back-wrap-->
                                             </section><!--back-->
                                             
                                            </div><!--cube-->
                                           </div><!--rollover-->
                                          </div><!--flip-->
                                        </a>
		                               </li>

		                               <li class="item four columns omega" data-id="id-4" data-type="webdesign">
                                        <a href="images/portfolio_images/big/image_4.jpg" data-rel="prettyPhoto[portfolio]">
                                          <div class="flip box fade">
                                           <div class="rollover">
        
                                            <div class="cube">
                                             <figure class="front">
                                                  <img src="images/portfolio_images/image_4.jpg" alt=""/>
                                             </figure><!--front-->
        
                                             <section class="back">
                                              <div class="back-wrap">
                                                  <h3>Nulla dictum hendrerit dui</h3>
                                                  <p>Etiam ultrices arcu at turpis volutpat porta. Donec pharetra lobortis nulla nec posuere.</p>  
                                              </div><!--back-wrap-->
                                             </section><!--back-->
                                             
                                            </div><!--cube-->
                                           </div><!--rollover-->
                                          </div><!--flip-->
                                        </a>
		                               </li>

		                               <li class="item four columns omega" data-id="id-5" data-type="webdesign">
                                        <a href="images/portfolio_images/big/image_5.jpg" data-rel="prettyPhoto[portfolio]">
                                          <div class="flip box fade">
                                           <div class="rollover">
        
                                            <div class="cube">
                                             <figure class="front">
                                                  <img src="images/portfolio_images/image_5.jpg" alt=""/>
                                             </figure><!--front-->
        
                                             <section class="back">
                                              <div class="back-wrap">
                                                  <h3>Phasellus vel leo tortor</h3>
                                                  <p>Praesent hendrerit aliquet iaculis. Nunc non erat a mi condimentum convallis.</p>  
                                              </div><!--back-wrap-->
                                              
                                             </section><!--back-->
                                            </div><!--cube-->
                                           </div><!--rollover-->
                                          </div><!--flip-->
                                        </a>
		                               </li>

		                               <li class="item four columns omega" data-id="id-6" data-type="webdevelopment">
                                        <a href="images/portfolio_images/big/image_6.jpg" data-rel="prettyPhoto[portfolio]">
                                          <div class="flip box fade">
                                           <div class="rollover">
        
                                            <div class="cube">
                                             <figure class="front">
                                                  <img src="images/portfolio_images/image_6.jpg" alt=""/>
                                             </figure><!--front-->
        
                                             <section class="back">
                                              <div class="back-wrap">
                                                  <h3>Etiam ut ultrices nibh</h3>
                                                  <p>Sed auctor consequat auctor. Maecenas non nisi erat.</p>  
                                              </div><!--back-wrap-->
                                             </section><!--back-->
                                             
                                            </div><!--cube-->
                                           </div><!--rollover-->
                                          </div><!--flip-->
                                        </a>
		                               </li>

		                               <li class="item four columns omega" data-id="id-7" data-type="webdesign">
                                        <a href="images/portfolio_images/big/image_7.jpg" data-rel="prettyPhoto[portfolio]">
                                          <div class="flip box fade">
                                           <div class="rollover">
        
                                            <div class="cube">
                                             <figure class="front">
                                                  <img src="images/portfolio_images/image_7.jpg" alt=""/>
                                             </figure><!--front-->
        
                                             <section class="back">
                                              <div class="back-wrap">
                                                  <h3>Phasellus convallis</h3>
                                                  <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>  
                                              </div><!--back-wrap-->
                                             </section><!--back-->
                                             
                                            </div><!--cube-->
                                           </div><!--rollover-->
                                          </div><!--flip-->
                                        </a> 
		                               </li>

		                               <li class="item four columns omega" data-id="id-8" data-type="webdesign">
                                        <a href="images/portfolio_images/big/image_8.jpg" data-rel="prettyPhoto[portfolio]">
                                          <div class="flip box fade">
                                           <div class="rollover">
        
                                            <div class="cube">
                                             <figure class="front">
                                                 <img src="images/portfolio_images/image_8.jpg" alt=""/>
                                            </figure><!--front-->
        
                                            <section class="back">
                                             <div class="back-wrap">
                                                 <h3>Vestibulum sapien dui</h3>
                                                 <p>Suspendisse arcu massa, tincidunt non faucibus nec, elementum in arcu.</p>  
                                             </div><!--back-wrap-->
                                            </section><!--back-->
                                            
                                           </div><!--cube-->
                                          </div><!--rollover-->
                                         </div><!--flip-->
                                       </a>
		                              </li>

		                              <li class="item four columns omega" data-id="id-9" data-type="webdevelopment">
                                       <a href="images/portfolio_images/big/image_9.jpg" data-rel="prettyPhoto[portfolio]"> 
                                         <div class="flip box fade">
                                          <div class="rollover">
        
                                           <div class="cube">
                                            <figure class="front">
                                                 <img src="images/portfolio_images/image_9.jpg" alt=""/>
                                            </figure><!--front-->
        
                                            <section class="back">
                                             <div class="back-wrap">
                                                 <h3>Maecenas id nisi urna</h3>
                                                 <p>Sed arcu enim, condimentum a auctor vitae, imperdiet varius nisi. In laoreet pharetra venenatis.</p>  
                                             </div><!--back-wrap--> 
                                            </section><!--back-->
                                            
                                           </div><!--cube-->
                                          </div><!--rollover-->
                                         </div><!--flip-->
                                       </a>
		                              </li>

		                              <li class="item four columns omega" data-id="id-10" data-type="webdevelopment">
                                       <a href="images/portfolio_images/big/image_10.jpg" data-rel="prettyPhoto[portfolio]">
                                         <div class="flip box fade">
                                          <div class="rollover">
        
                                           <div class="cube">
                                            <figure class="front">
                                                 <img src="images/portfolio_images/image_10.jpg" alt=""/>
                                            </figure><!--front-->
        
                                            <section class="back">
                                             <div class="back-wrap">
                                                 <h3>Lorem ipsum</h3>
                                                 <p>Ei nusquam officiis luptatum sed. Et wisi viderer vix. Eu pro tantas dei alienum, pri atentio recusabo gubergren.</p>  
                                             </div><!--back-wrap-->
                                            </section><!--back-->
                                            
                                           </div><!--cube-->
                                          </div><!--rollover-->
                                         </div><!--flip-->
                                       </a> 
		                              </li>

		                              <li class="item four columns omega" data-id="id-11" data-type="webdesign">
                                       <a href="images/portfolio_images/big/image_11.jpg" data-rel="prettyPhoto[portfolio]">
                                         <div class="flip box fade">
                                          <div class="rollover">
        
                                           <div class="cube">
                                            <figure class="front">
                                                 <img src="images/portfolio_images/image_11.jpg" alt=""/>
                                            </figure><!--front-->
        
                                            <section class="back">
                                             <div class="back-wrap">
                                                 <h3>Cras commodo</h3>
                                                 <p>Pellentesque elementum diam feugiat odio venenatis a sagittis erat dignissim.</p>  
                                             </div><!--back-wrap-->
                                            </section><!--back-->
                                            
                                           </div><!--cube-->
                                          </div><!--rollover-->
                                         </div><!--flip-->
                                       </a>
		                              </li>

		                              <li class="item four columns omega" data-id="id-12" data-type="webdesign">
                                       <a href="images/portfolio_images/big/image_12.jpg" data-rel="prettyPhoto[portfolio]">
                                         <div class="flip box fade">
                                          <div class="rollover">
        
                                           <div class="cube">
                                            <figure class="front">
                                                 <img src="images/portfolio_images/image_12.jpg" alt=""/>
                                            </figure><!--front-->
        
                                            <section class="back">
                                             <div class="back-wrap">
                                                 <h3>Sed arcu enim</h3>
                                                 <p>Quisque sodales, dolor sit amet molestie malesuada, libero nunc facilisis lacus.</p>  
                                             </div><!--back-wrap-->
                                            </section><!--back-->
                                            
                                           </div><!--cube-->
                                          </div><!--rollover-->
                                         </div><!--flip--> 
                                       </a>
		                              </li>

	                              </ul>    
				               <!-- End Portfolio Items -->
                               </div> 
                              </div>
					</div>
				</div>
                
				<div id="contact" class="step" data-x="4000" data-y="1500" data-z="1000" data-rotate="-20">
					<div id="jms-content5"> 
                        
                       <div class="ten columns">
                        <div class="block">

                            <div class="title">
                                <h2>My Location on World Map</h2>
                            </div>
                         
                             <div class="gmap" id="map" data-center="98 Norman Grove, London, United Kingdom" data-zoom="15">
                                 <address>
                                    <strong>98 Norman Grove</strong><br />
                                            London, United Kingdom<br /> 
                                 </address>
                              </div>
                             
                         </div>                        
                        </div>

                        <div class="six columns">
                         <div class="block end"> 
                          <div class="title">
                              <h2>Contact With Me</h2>
                          </div>
                                <div id="contact-wrapper">
                                <form id="contactform" action="javascript:alert('success!');">
					            <fieldset class="info_fieldset">
						        <div id="note"></div>
                                </fieldset> 
                                <label>Name</label>
							    <input class="textbox" type="text" name="name" value="" /><br />
                                <label>e-mail</label>
							    <input class="textbox" type="text" name="email" value="" /><br />
                                <label>Message</label>
							    <textarea class="textbox" name="message" rows="5" cols="25" ></textarea><br />
							    <input class="button" type="submit" value="Send Message" />
                                </form>
                                </div>
                         </div>   
                        </div>       
					</div>
				</div>
			</section>
        </div>       
    </body>
</html>